<template>
  <div>
    <!--定义一个名片 -->
    <!--  <div class="card-container">-->
    <!--    &lt;!&ndash;    上面是一张图&ndash;&gt;-->
    <!--    <div class="top-box">-->
    <!--&lt;!&ndash;      本来是遍历两张图片的&ndash;&gt;-->
    <!--      &lt;!&ndash;<img :src="cardItems.thumb"/>&ndash;&gt;-->
    <!--      &lt;!&ndash;1-5第二张图片&ndash;&gt;-->
    <!--      <img class="home-image2" data-src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" lazy="loaded">-->
    <!--    </div>-->
    <!--    &lt;!&ndash;下面是文字和价钱描述 &ndash;&gt;-->
    <!--    <div class="bottom-box">-->
    <!--&lt;!&ndash;      左边的价格描述&ndash;&gt;-->
    <!--      <div class="left-box">-->
    <!--        <div class="box-title">美容的秘籍</div>-->
    <!--        <div>-->
    <!--        <span class="box-price">￥{{cardItems.price}}</span>-->
    <!--        <span class="box-price-des">特惠价</span>-->
    <!--        <del>原价：￥{{cardItems.price}}</del>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--&lt;!&ndash;右边的抢购&ndash;&gt;-->
    <!--          <span @click="toClickBt">抢购</span>-->
    <!--        </div>-->
    <!--  </div>-->

    <van-col span="12" class="van-col-total">
      <div class="card-container">
        <div class="top-box">
          <!--      本来是遍历两张图片的-->
          <img :src="cardItems.thumb" class="img-common"/>
          <!--1-5第二张图片-->
          <!--          <img class="home-image2" data-src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" src="http://134.175.137.231/media/banner/ad/details1_G1D5WAG.png" lazy="loaded">-->
        </div>
        <!--下面是文字和价钱描述 -->
        <div class="bottom-box1">
          <!--      左边的价格描述-->
          <!--            <div class="left-box1">-->
          <div class="box-title1">{{cardItems.title}}</div>
          <van-row>
            <van-col span="15">
              <div>
                <div class="box-price">￥{{cardItems.price}}</div>
                <del>原价：￥{{cardItems.price}}</del>
              </div>
            </van-col>
            <van-col span="9">
              <span @click="toClickBt" class="cardItems-buys">抢购</span>
            </van-col>
          </van-row>
          <!--            </div>-->
        </div>
      </div>
    </van-col>

  </div>
</template>

<script>
import { Row, Col } from 'vant'
export default {
  name: 'c-card-box',
  components: {
    [Row.name]: Row,
    [Col.name]: Col
  },
  data () {
    return {}
  },
  // 父组件传给子组件就要用这个方法
  // 此处从tabhome接收了cardItems
  props: {
    cardItems: {
      type: Object
    }
  },
  methods: {
    toClickBt () {
      console.log('点击事件（子组件）')
      // 从父组件传过来的
      this.$emit('toClickBt', '子组件参数')
    }
  }
}
</script>

<style scoped lang="less">
  .van-col-total{
    word-break:keep-all; /* 不换行 */
    white-space:nowrap; /* 不换行 */
    overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  }
  /*第二张图片*/
  .home-image2{
    border-radius: 20px;
    /*padding: 15px;*/
    width: 100%;
    height: 120px;
  }
  /*美容的秘籍*/
  .box-title{
    font-weight: 600;
    padding:10px ;
  }
  /*价钱*/
  .box-price{
    margin: 3px;
  }
  /*单个卡片的样式 我设置卡片和下面的距离有20px*/
  .card-container {
    /*margin: 0 15px 10px 20px;*/
    margin: 0 0px 10px 15px;
    /*顺时针方向*/
    /*height: 180px;*/
    /*width: 150px;*/
    height: 100%;
    width: 82%;
    /*margin: 0 auto;*/
    background: rgb(255, 255, 255);
  }
  .img-common {
    /*.card-container .top-box img {*/
    width: 100%;
    height: 80px;
    display: block;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
  }
  .bottom-box1{
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-box-shadow: 0 3px 20px rgb(226, 230, 229);
    -moz-box-shadow: 0 3px 20px rgb(226, 230, 229);
    box-shadow: 0 3px 20px rgb(226, 230, 229);
    .box-title1{
      width: auto;
      font-size: 14px;
      font-weight: 600;
      padding:8px 10px 0 10px ;
    }
    .box-price{
      /*.card-container .bottom-box .left-box span {*/
      font-family: "Hiragino Sans GB", arial, "Microsoft Yahei", sans-serif;
      margin: 0 0 0 8px;
      font-size: 18px;
      /*特惠价299的样式*/
      font-weight: bold;
      color: red;
    }
    .cardItems-buys{
      text-align: center;
      width: 2.5rem;
      height: 1.875rem;
      /*和上面的距离 表示行之间垂直距离*/
      line-height: 30px;
      color: white;
      background: rgb(44, 188, 196);
      border-radius: 8px;
      font-family: "Hiragino Sans GB", arial, "Microsoft Yahei", sans-serif;
      font-size: 14px;
      /*margin-left: 10px;*/
      padding: 5px 11px;
    }
  }

</style>
